<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>HTML5 文件切割上传!</title>
    <!-- zui -->
    <!-- ZUI 标准版压缩后的 CSS 文件 -->
    <link rel="stylesheet" href="//cdn.bootcss.com/zui/1.9.1/css/zui.min.css">
    <link rel="stylesheet" href="//cdn.bootcss.com/zui/1.9.1/lib/uploader/zui.uploader.min.css" >

</head>
<body>
<div class="container">
    <h1>文件分片上传</h1>
    <div class="row">
        <div class="col-lg-12">
            <div id="uploaderExample" class="uploader">
                <div class="file-list" data-drag-placeholder="请拖拽文件到此处"></div>
                <button type="button" class="btn btn-primary uploader-btn-browse"><i class="icon icon-cloud-upload"></i> 选择文件</button>
                <button type="button" class="btn btn-primary begin"><i class="icon icon-cloud-upload"></i> 开始上传</button>
            </div>
        </div>
    </div>
    <div class="file-show">

    </div>

</div>


<!-- 在此处编码你的创意 -->

<!-- ZUI Javascript 依赖 jQuery -->
<script src="//cdn.bootcss.com/zui/1.9.1/lib/jquery/jquery.js"></script>
<!-- ZUI 标准版压缩后的 JavaScript 文件 -->
<script src="//cdn.bootcss.com/zui/1.9.1/js/zui.min.js"></script>
<script src="//cdn.bootcss.com/zui/1.9.1/lib/uploader/zui.uploader.min.js"></script>
<script type="text/javascript">
    var successCounts =new Array();
    $(function($){
        $('#uploaderExample').uploader({
            autoUpload: false,            // 当选择文件后立即自动进行上传操作
            url: '/uploadMulit'  // 文件上传提交地址
        });
        $(".begin").click(function(){
            var uploader = $('#uploaderExample').data('zui.uploader');
            var file_array = uploader.getFiles();//获取已经选择的文件
            successCounts.length=0;
            if(file_array.length <=0){
                new $.zui.Messager('您还没有选择要上传的文件', {
                    type: 'danger' // 定义颜色主题
                }).show();
            }else{
                $(".file-show").html('');
                for(var i=0;i<file_array.length;i++){
                    upload(file_array[i]);
                }
            }
        });
        function upload(file_obj){

            new $.zui.Messager('文件'+file_obj.name+'开始上传', {
                type: 'success' // 定义颜色主题
            }).show();
            successCounts[file_obj.id]=0;
            var htmls='<div class="row"><div class="col-lg-8"><!-- 条纹效果 --><div class="progress progress-striped active" ><div class="progress-bar progress-bar-success " id="progress_'+file_obj.id+'" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" style="width:0%"><span class="sr-only">0% Complete (success)</span></div></div><strong><span class="progressbar-value">0</span>%</strong></div><div class="col-lg-4" id="filenames_'+file_obj.id+'">'+file_obj.name+'</div></div>';

            $(".file-show").append(htmls);

            var name = file_obj.name, //文件名
                size = file_obj.size, //总大小
                shardSize = 256 * 1024,//2 * 1024 * 1024, //以2MB为一个分片
                shardCount = Math.ceil(size / shardSize); //总片数

            $.getJSON('/getSucIndexs',{'name':name,'total':shardCount},function(result){
                if(result.state ==='ok'){
                    var succ_indexs;

                    if(result.succ_indexs != '' && result.succ_indexs != null && result.succ_indexs.length() >0){
                        succ_indexs=result.succ_indexs.split(",");
                    }else{
                        succ_indexs = new Array();
                    }

                    successCounts[file_obj.id] = succ_indexs.length;

                    var tempFile=null;
                    for(var i = 0;i < shardCount;++i){
                        var index= i+1;
                        var a = succ_indexs.indexOf(''+index); //判断这个片段是否已经上传过了

                        if(a ==-1 ){
                            //计算每一片的起始与结束位置
                            var start = i * shardSize,
                                end = Math.min(size, start + shardSize);
                            //构造一个表单，FormData是HTML5新增的
                            var form = new FormData();
                            var tempBolb = file_obj.getNative().slice(start,end);//slice方法用于切出文件的一部分
                            var tempName=name+index+".temp";
                            tempFile = new File([tempBolb],tempName);//重命名切割出来的文件
                            form.append("data", tempFile);
                            form.append("name", name);
                            form.append("total", shardCount); //总片数
                            form.append("index", index); //当前是第几片

                            //Ajax提交
                            $.ajax({
                                url: "/uploadMulit",
                                type: "POST",
                                data: form,
                                async: true, //异步
                                processData: false, //很重要，告诉jquery不要对form进行处理
                                contentType: false, //很重要，指定为false才能形成正确的Content-Type
                                success: function(result){
                                    if(result.state==='ok'){

                                        if(name === file_obj.name){
                                            successCounts[file_obj.id] = successCounts[file_obj.id] +1;
                                            //计算上传进度
                                            var file_progress= parseInt(100*(successCounts[file_obj.id])/shardCount);

                                            //显示上传进度
                                            $('#progress_'+file_obj.id).css('width',  '100%');
                                            $('#progress_'+file_obj.id).parents(".col-lg-8").find('.progressbar-value').text(file_progress);
                                        }

                                    }

                                }

                            });
                        }

                    }

                }else{
                    new $.zui.Messager('上传失败', {
                        type: 'danger' // 定义颜色主题
                    }).show();
                }
            }).error(function(){
                new $.zui.Messager('文件上传失败，请重试', {
                    type: 'danger' // 定义颜色主题
                }).show();

            });

        }
    });
</script>
</body>
</html>